<script setup>
import { sleep } from 'solar'
const model = defineModel()
const keyup = (e) => {
  model.value = e.target.innerText
  nextTick(() => {
    e.target.blur()
    const next = e.target.nextSibling
    if (next.className === 'result') {
      next.focus()
    }
  })
}
const keydown = (e) => {
  console.log('keydown', e)
  const input = e.target.innerText
  if (input.length > 0) {
    e.preventDefault();
  }
}
const click = async (e) => {
  if (model.value) {
    model.value = null
    await sleep(100)
    e.target.focus()
  }
}
</script>
<template>
  <div :contenteditable="!model" class="result" @keyup="keyup" @keydown="keydown" @click="click"> {{ model }}</div>
</template>
<style scoped lang="less">
.result {
  border-radius: 5px;
  margin: 0 5px;
  width: 20px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border: 2px solid #ccc;

  &:active {
    border: none;
  }

  &:focus {
    outline: none;
  }
}
</style>
